 <template>
  <div class="bcg jsgl_box">
    <header-comm></header-comm>
    <div class="hedlist">
      <div class="headbtn">
        <a-button type="primary" class="editable-add-btn" @click="handleAdd">添加角色</a-button>
      </div>
    </div>
    <div class="jsgl">
      <!-- <div class="glfltit" v-if="$store.state.wzfl">
        <h3>文章分类</h3>
        <a-icon @click="quxiao" type="close" />
      </div>-->
      <div>
        <div></div>
        <div class="hydj" v-if="$store.state.tjwz">
          <jsgltck class="hydj_xgym"></jsgltck>
        </div>
        <a-table :dataSource="dataSource" :pagination="false" :columns="columns">
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <span>
                <a class="del" @click="() => edit(record,record.key)">修改</a>
                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除吗?"
                  @confirm="() => onDelete(record,record.key)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";
import jsgltck from "./jsgltck.vue";
const dataSource = [
];
const columns = [
  {
    title: "编号",
    dataIndex: "id_num",
    width: "30%",
    scopedSlots: { customRender: "id_num" }
  },
  {
    title: "角色名称",
    dataIndex: "name",
    width: "30%",
    scopedSlots: { customRender: "name" }
  },
  
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

export default {
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));
    return {
 
      dataSource,
      columns,
      count: 2,
      username:'',
      id_num:'',
      power_list:[],
    };
  },
  components: {
    headerComm,
    jsgltck
  },

  methods: {
   
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    },
    onDelete(value,key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
    this.axios.post("quanxian/roleDelete.php",qs.stringify({
      id_num:value.id_num
    })).then(res=>{
      console.log(res)
       if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
    })
    },
    handleAdd() {
      this.$store.state.tjwz = true;
    },
    //文章分类--列表
    getwzfl() {
      this.axios
        .post(
          "quanxian/roleList.php"
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.dataSource = res.data.result.result;
            for (var i = 0; i < res.data.result.result.length; i++) {
              this.dataSource[i].key = i;
            }
          }
        });
    },

    handleChange(value, key, column) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.dataSource = newData;
      }
    },
    edit(value,key) {
      this.$store.state.tjwz = true;
      this.$store.state.jsgl = true;
      this.username=value.name
      this.id_num=value.id_num
      this.power_list=value.power_list.split(",")
        console.log(this.power_list)
        console.log(value)
    }
  },

  created() {
    this.getwzfl();
    this.checkedKeys=['4','5','0-0-1-0','0-0-1-1']
  console.log(this.treeData)
  }
};
</script>

<style lang='less' scoped>
.jsgl_box{
.hedlist {
  position: relative;
  top: 65px;
  width: 98%;
  left: 1%;
  height: 60px;
  background-color: #fff;
  text-align: left;
  padding: 0 20px;
}
.jsgl {
  width: 98%;
  height: auto;
  position: relative;
  top: 100px;
  left: 1%;
  // box-shadow: 0 0 5px #ccc;
  border: 1px solid #ccc;
  text-align: left;
  background-color: #fff;
  .hydj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    height: 930px;
    .hydj_xgym {
      position: absolute;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .gj_wzfl {
    padding: 0 20px;
  }

  .addwzfl {
    display: flex;
    justify-content: space-between;
    .addwzfl_tit {
      font-size: 14px;
    }
  }
  .editable-add-btn {
    margin: 15px 20px;
  }
  .button {
    margin: 15px 0;
  }
  .editable-add-btn:hover {
    background-color: #1890ff;
    border: 0 !important;
    color: #fff !important;
  }
  .editable-cell {
    position: relative;
  }

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    line-height: 18px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
  .ant-input {
    width: 70% !important;
  }
  //   .ant-table-wrapper {
  //     padding-bottom: 100px !important;
  //   }
  //   .list_num {
  //     position: absolute;
  //     bottom: 60px;
  //     left: 25px;
  //     font-size: 15px;
  //   }
  //   .wzfl_btn {
  //     position: absolute;
  //     bottom: 39px;
  //     left: 50%;
  //     transform: translateX(-50%);
  //     .bc {
  //       background-color: #1890ff!important;
  //       color: #fff !important;
  //     }
  //     button {
  //       width: 100px !important;
  //       margin: 0 20px;
  //     }
  //     button:hover {
  //       background-color: #1890ff;
  //       border: 0 !important;
  //       color: #fff !important;
  //     }
  //   }
}
}

</style>
